<template>
  <div class="date-box">
    <el-select 
      class="list-box" 
      v-model="dateType" 
      placeholder="请选择"
      @change="selectDateType">
      <el-option
        v-for="item,index in dateList"
        :key="index"
        :label="item.name"
        :value="index">
      </el-option>
    </el-select>
    <div :class="['calendar-box',dateType==0?'':'disabled']" @click="showCalendar">
      <div class="icon-calendar"></div>
      <div class="date">{{date[0]}}</div>
      <div>-</div>
      <div class="date">{{date[1]}}</div>
    </div>
    <van-calendar 
      color="#409EFF" 
      v-model="show" 
      type="range" 
      @confirm="onConfirm"  
      :show-confirm="false"
      :min-date="minDates" 
      :max-date="maxDates"
      :default-date="[new Date(date[0]),new Date(date[1])]"
      :max-range="dateScope || null"
      />
  </div>
</template>

<script>
import {formart} from '@/utils/dateUtils.js'

export default {
  data() {
    return {
      dateType: 0,
      date: [],
      show: false,
      minDates: "",
      maxDates: ""
    }
  },
  props:{
    dateList: {
      type: Array,
      default: function () {
        return []
      }
    },
    defaultDate: { //默认日期
      type: Array,
      default: function () {
        return null
      }
    },
    minDate: {
      type: String,
      default: null
    },
    dateScope: {
      type: Number,
      default: 0
    }
  },
  created() {
    if(this.defaultDate) {
      this.dateType = 0
      this.date = this.defaultDate
    }else {
      let date = formart(new Date(new Date().setDate(new Date().getDate() - 1)));
      this.date = [date,date];
    }
    if(this.minDate) {
      this.minDates = new Date(this.minDate)
    }else {
      this.minDates = new Date(new Date().setDate(new Date().getDate()-365))
    }
    this.maxDates = new Date()
  },
  methods: {
    showCalendar() {
      if(this.dateType == 0) {
        this.show = true
      }
    },
    onConfirm(date) {
      const [start, end] = date;
      this.show = false;
      this.date = [formart(start),formart(end)];
      this.$emit('selectDate',{index:this.dateType,date: this.date})
    },
    //父元素动态修改日期
    setData(date) {
      this.dateType = 0
      this.date = date
    },
    //父元素动态修改下拉框选中项
    setDataType(index) {
      this.dateType = index
      this.date = this.dateList[this.dateType].value
    },
    //选择日期范围(dateList)
    selectDateType() {
      if(this.dateList[this.dateType].value) {
        this.date = this.dateList[this.dateType].value
        this.$emit('selectDate',{index:this.dateType,date: this.date})
      }
    },
    //选择日期传递给父元素
    selectDate() {
      this.$emit('selectDate',{index:this.dateType,date: this.date})
    },
  }
}
</script>
<style lang="less" scoped>
.calendar-box{
  display: flex;
  align-items: center;
  width: 245px;
  height: 36px;
  background: #FFFFFF;
  border-radius: 3px;
  border: 1px solid #E6E6E6;
  box-sizing: border-box;
  padding: 0 8px;
  color: #606266;
  font-size: 14px;
  .icon-calendar{
    width: 16px;
    height: 16px;
    background: url("")
      no-repeat;
  }
  .date{
    margin: 2px 15px 0;
  }
}
.disabled{
  background-color: #F5F7FA;
  color: #C0C4CC;
}

.date-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  .list-box{
    width: 81px;
    height: 36px;
    border-radius: 3px;
    /deep/ .el-input__inner{
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      padding: 0 11px;
      height: 36px;
    }
    /deep/ .el-input__icon{
      line-height: 28px;
    }
  }
  .date-select{
    width: 245px;
    height: 36px;
    /deep/ .el-range-separator,/deep/ .el-range__icon{
      line-height: 28px;
    }

  }
}
</style>